<script setup>
import request from '@/utils/request'
import { Delete, EditPen, Plus } from '@element-plus/icons-vue'
import { ref, onMounted, watch } from 'vue'
import { rewriteDefault } from 'vue/compiler-sfc';
const tableData = ref([])
onMounted(() => {
    select()
})

const hid = ref('')
const bookId = ref('')

const select = async () => {
    const res = await request.get('/hotlist')
    tableData.value = res.data.data
}

const openEditHot = async (id) => {
    dialog.value = true
    const res = await request.get('/findhot', {
        params: {
            id
        }
    })
    hid.value = res.data.data.id
    bookId.value = res.data.data.bookId
}

const editHot = async () => {
    await request.post('/edithot', {
        id: hid.value,
        bookId: bookId.value
    })
    dialog.value = false
    select()
    ElMessage({
        type: 'success',
        message: '修改成功'
    })
}

const deleteHot = async (id) => {
    await request.delete('/deletehot', {
        params: {
            id
        }
    })
    select()
    ElMessage({
        type: 'success',
        message: '删除成功'
    })
}

const addHot = () => {
    dialog2.value = true
}
const dialog = ref(false)

const dialog2 = ref(false)

const add = async () => {
    await request.post('/addhot', {
        bookId: bookId.value
    })
    ElMessage({
        type: 'success',
        message: '添加成功'
    })
    dialog2.value = false
    select()
}
</script>
<template>
    <div class="head">
        <h1 class="title">->热门管理</h1>
        <el-button type="primary" plain class="add" @click="addHot">添加热门</el-button>
    </div>
    <el-table :data="tableData" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="bookId" label="书籍ID" width="300" />
        <el-table-column label="编辑">
            <template #default="{ row }">
                <el-button type="primary" circle :icon="EditPen" @click="openEditHot(row.id)"></el-button>
                <el-button type="danger" circle :icon="Delete" @click="deleteHot(row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialog" title="编辑热门" width="500">
        <el-input v-model="bookId" style="width: 240px" placeholder="输入书籍序号" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="editHot">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialog2" title="新增热门" width="500">
        <el-input v-model="bookId" style="width: 240px" placeholder="Please input" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog2 = false">取消</el-button>
                <el-button type="primary" @click="add">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
.head {
    display: flex;
    justify-content: space-between;

    .add {
        margin-right: 28px;
    }
}

.title {
    margin-left: 8px;
}

.form {
    margin-top: 38px;
}

.table {
    width: 100%;
}

.page {
    margin-top: 18px;
    float: right;
    margin-right: 38px;
}
</style>